<template>
  <div>
    <div
      v-for="restaurant in restaurants"
      :key="restaurant._id"
      @click="toMenu(restaurant._id)"
    >
      {{ restaurant.name['zh-CN'] }}
    </div>
    <div
      v-show="loading"
      class="loading-container"
    >
      <img
        src="@/assets/loading.gif"
        alt=""
        class="loading-img"
      >
    </div>
  </div>
</template>

<script>
import { getRestaurant } from '@/api/restaurant';

export default {
  data() {
    return {
      loading: false,
      // * 餐馆信息
      restaurants: [],
    };
  },
  created() {
    this.loadRestaurant();
  },
  methods: {
    async loadRestaurant() {
      try {
        this.loading = true;
        const result = await getRestaurant();
        this.restaurants = result;
      } catch (error) {
        alert(error.message);
      } finally {
        this.loading = false;
      }
    },
    toMenu(id) {
      // ? query的方式
    //   this.$router.push({
    //     name: 'menu',
    //     query: {
    //       id: 1,
    //     },
    //   });
      // ? params的方式
    //   this.$router.push({
    //     name: 'menu',
    //     params: {
    //       id: 1,
    //     },
    //   });
      this.$router.push(`/menu/${id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
